<template>
  <div>
         <!-- 购物车主体内容 -->
    <div class="concent" v-infinite-scroll="loadMore">
      <div class="list-item">
        <label>
          <input type="checkbox" value="">
          <span class="iconfont icon-weixuanzhong fontchecked"></span>
        </label>
        <a href="javascript" class="imga">
            <img src="../../images/9012177.jpg_220x240.jpg" alt="">
          </a>
        <div class="p-right">
          <p class="p-top">
            <a href="">[鲜花]不变的承诺</a>
          </p>
          <div class="p-bottom">
            <span class="p-price">&yen;298</span>
            <!-- 数量加减 -->
            <div class="mui-numbox"  data-numbox-min='0' data-numbox-max='100' id="numbox">
              <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
              <input class="mui-numbox-input" type="number" value="0"/>
              <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
            </div>
            <a href="javascript:;" class="del">删除</a>
          </div>
        </div>
      </div>


            <div class="list-item">
        <label>
          <input type="checkbox" value="">
          <span class="iconfont icon-weixuanzhong fontchecked"></span>
        </label>
        <a href="javascript" class="imga">
            <img src="../../images/9012177.jpg_220x240.jpg" alt="">
          </a>
        <div class="p-right">
          <p class="p-top">
            <a href="">[鲜花]不变的承诺</a>
          </p>
          <div class="p-bottom">
            <span class="p-price">&yen;298</span>
            <!-- 数量加减 -->
            <div class="mui-numbox"  data-numbox-min='0' data-numbox-max='100' id="numbox">
              <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
              <input class="mui-numbox-input" type="number" value="0"/>
              <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
            </div>
            <a href="javascript:;" class="del">删除</a>
          </div>
        </div>
      </div>
      <div class="kongbai"></div>
      <!-- 推荐部分 -->
      <div class="recommend">
        <p class="recommend-nav">
          <a href="" class="like-left" v-bind:class='{ "active" : isA}' @click="toggle()" @click.prevent="flag=true">购买该商品的还购买了</a>
          <a href="" class="fl-right" v-bind:class='{ "active" : !isA}' @click="toggle()" @click.prevent="flag=false">巧克力/花瓶</a>
        </p>
        <like v-if="flag"></like>
        <chocolate v-else="flag"></chocolate>
      </div>
    </div>
</template>

<script>
 export default {
  data() {
    return {};
  },
  methods: {
  }
}; 
</script>
<style lang="css" scoped>
/* 底部 */
.concent .recommend .product ul {
  overflow: hidden;
}
.concent .recommend .product li{
  float: left;
  width: 90px;
  padding: 0 5px;
  margin-right: 10px;
}
.concent .recommend .product li .product-name {
  margin: 0;
  font-size: 10px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.concent .recommend .product li .product-price {
  text-align: center;
  color: #fe6600;
}
</style>

